<template>
  <section class="bg-red-650">
    <div class="mt-24 py-16 w-275 mx-auto">
      <div class="text-white flex items-center">
        <div class="text-8 tracking-normal leading-8 font-bold w-1/2">WORK WITH US</div>
        <div class="w-1/2 flex justify-end items-center font-semibold">
          <button @click="readMore">
            Read More<span class="ml-2">➔</span>
          </button>
        </div>
      </div>

      <div
        class="flex lg:grid-cols-4 gap-8 mt-12"
        data-aos="slide-right"
        data-aos-duration="800"
      >
        <div
          class="bg-white rounded-b-6xl pt-2 text-center w-64 h-85"
          v-for="(item, index) in steps"
          :key="index"
        >
          <div class="text-2xl font-bold">{{ item.title }}</div>
          <div class="text-xl font-bold tracking-snugger mt-9">{{ item.subTitle }}</div>
          <div class="text-sm mt-6 mx-5">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import {useRouter} from "vue-router";

const steps = [
  {
    title: 'Step 1',
    subTitle: 'Get Instant Quote',
    desc: 'Share the 2D/3D files and project specifications with us for a precise quotation'
  },
  {
    title: 'Step 2',
    subTitle: 'Confirm Puchasing Order',
    desc:
      'Once the order is confirmed, we will provide a detailed design and manufacturing analysis report. ' +
      'Our engineers will review all tolerances and appearance specifications, ' +
      'identifying any issues that may affect the quality of the parts.'
  },
  {
    title: 'Step 3',
    subTitle: 'Star Production',
    desc:
      'Upon DFM approval, we will initiate production. ' +
      'Our project engineers will conduct thorough inspections of the parts’ dimensions, tolerances, ' +
      'and appearance during manufacturing, ensuring they meet your expectations.'
  },
  {
    title: 'Step 4',
    subTitle: 'Delivery Goods',
    desc: 'After the quality inspection, the parts will be shipped to your location.'
  }
]
// 通过路由跳转
const router = useRouter()
const readMore = () => {
  router.push({ path: '/about-us' })
}
</script>

<style scoped></style>
